<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点操作</title>
</head>
<body>

    <div class="box">我是div盒子</div>
    <script>
        //创建元素
        var h1El = document.createElement("h1");
        h1El.textContent = "我是h1元素";
        //找到div盒子
        var divEl = document.querySelector(".box");
        //append插入
        divEl.append(h1El);
        //preappend插入
        var h2El = document.createElement("h2");
        h2El.textContent = "我是h2元素";
        divEl.prepend(h2El);
        //使用before
        divEl.before(document.createElement("a").textContent="百度一下")
        //使用after
        divEl.after(document.createElement("a").textContent="goole一下");
        //使用replaceWith
        var h1El2 = document.createElement("h1");
        h1El2.textContent = "我是h1El2";
        h2El.replaceWith(h1El2);

    </script>
</body>
</html>